<template>
  <div class="main">
    <div class="navigator">
      <div class="navnain"></div>
      <div class="navbanner">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          active-text-color="#11aaf1"
        >
          <el-menu-item index="11" @click="cur=1">
            <p>官网首页</p>
            <p>HOME</p>
          </el-menu-item>
          <el-menu-item index="2" @click="cur=2">
            <p>特权内容</p>
            <p>ROYALTY</p>
          </el-menu-item>
          <el-menu-item disabled="true" index="3">
            <p>特权网吧</p>
            <p>INTERNET CAFES</p>
          </el-menu-item>
          <el-menu-item disabled="true" index="4">
            <p>申请特权</p>
            <p>APPLICATION</p>
          </el-menu-item>
          <el-menu-item disabled="true" index="5">
            <p>客服专区</p>
            <p>SERVICE</p>
          </el-menu-item>
          <el-menu-item disabled="true" index="6">
            <p>个人中心</p>
            <p>USER CENTER</p>
          </el-menu-item>
          <el-menu-item disabled="true" index="7">
            <p>网管登录</p>
            <p>LOGIN</p>
          </el-menu-item>
        </el-menu>
      </div>
    </div>
    <mainIndex v-show="cur==1"></mainIndex>
    <royalty v-show="cur==2"></royalty>
  </div>
</template>
<script>
import mainIndex from './main'
import royalty from './royalty'
export default {
  data: () => ({
    activeIndex: '1',
    cur: 1
  }),
  created () {},
  methods: {
    handleSelect (key, keyPath) {}
  },
  components: {
    mainIndex,
    royalty
  }
}
</script>
<style lang="less" scoped>
.main {
  .navigator {
    width: 100%;
    min-width: 1240px;
    position: relative;
    background: url("images/navigator/1.jpg") center top no-repeat;
    .navnain {
      position: relative;
      left: 50%;
      top: 0;
      z-index: 2;
      width: 100%;
      height: 572px;
      overflow: hidden;
      margin-left: -960px;
    }
    .navbanner {
      width: 1240px;
      height: 70px;
      margin: 0 auto;
      background: url("images/navigator/2.jpg") center -3px no-repeat;
      .el-menu {
        background-color: transparent;
      }
      .el-menu.el-menu--horizontal {
        border: none;
        .el-menu-item {
          height: 70px;
          width: 177px;
          border-bottom: 5px solid transparent;
          color: white;
          &:hover {
            color: #11aaf1;
            background-color: transparent;
          }
          p {
            &:nth-child(1) {
              font-size: 18px;
              line-height: 18px;
              margin-bottom: 0;
            }
            &:nth-child(2) {
              font-size: 12px;
              line-height: 12px;
              margin-top: 5px;
            }
          }
        }
      }
    }
  }
}
</style>
